<template>
  <ActionPanel>
    <ElDescriptions :column="column" border>
      <ElDescriptionsItem label="名称">{{ props.name }}</ElDescriptionsItem>
      <ElDescriptionsItem label="标签">
        <el-input v-model="data.label" />
      </ElDescriptionsItem>
      <ElDescriptionsItem label="注释" :span="column">
        <el-input type="textarea" v-model="data.comment" />
      </ElDescriptionsItem>
      <ElDescriptionsItem label="图标">
        <IconPicker v-model="data.icon" />
      </ElDescriptionsItem>
      <ElDescriptionsItem label="颜色">
        <el-color-picker v-model="data.color" />
      </ElDescriptionsItem>
      <ElDescriptionsItem label="尺寸">
        <SizeEditor v-model="data.size" />
      </ElDescriptionsItem>
      <ElDescriptionsItem label="HOVER颜色">
        <el-color-picker v-model="data.hoverColor" />
      </ElDescriptionsItem>    
      <ElDescriptionsItem label="分组项" :span="column">        
        <DeclaresEditor v-if="isSeed" :seed-name="props.seedName" v-model="data.items" />
        <AppGroupItemSelect v-else v-model="data.items" />
      </ElDescriptionsItem>
    </ElDescriptions>
    <template #footer>
      <ElButton type="primary" @click="doSave">保存</ElButton>
      <ElButton @click="close">关闭</ElButton>
    </template>
  </ActionPanel>
</template>
<script setup lang="ts">
  import { GroupConfiguration } from '@/views/dev-types';
  import { ElDescriptions, ElDescriptionsItem, ElInput, ElColorPicker, ElButton } from 'element-plus';
  import { inject, ref } from 'vue';
  import { IconPicker } from '@/components/IconPicker';
  import { ActionPanel } from '@/components/ActionPanel';
  import { closePopupKey } from '@/components/Popup';
  import { currentApp, getSeed } from '@/views/seed-dev';
  import { SizeEditor } from '../../SizeEditor';
  import AppGroupItemSelect from './AppGroupItemSelect.vue';
  import { DeclaresEditor } from '../../DeclarsEditor';

  const props = defineProps<{name: string, type?: 'app' | 'seed', seedName?: string}>()
  const name = props.name
  const isSeed = props.type === 'seed'
  const column = 2
  
  const close = inject<() => void>(closePopupKey, void 0)
  const data = ref<GroupConfiguration>(isSeed ? getSeed(props.seedName).groups[name] : currentApp.value.groups[name])

  function doSave() {
    if(isSeed) {
      const seed = getSeed(props.seedName)
      if(!seed.groups) seed.groups = {}
      seed.groups[props.name] = data.value
    } else {
      if(!currentApp.value.groups) currentApp.value.groups = {}
      currentApp.value.groups[props.name] = data.value
    }
    
    close?.()
  }
</script>